{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<style>
    .kb_left{
    background: white;
    padding: 5px 10px ;
        display: flex;
        flex-direction: column;
}
    .kb_left_ban{
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        border: 1px solid #e8e7e7;
        box-shadow:  1px 1px 2px 2px #e8e7e7;
        height: 60px;
        margin: 5px 0;
    }

    .kb_left_ban_icon{
        display: flex;
        align-items: center;
    }
    .kb_left_ban_text{
        display: flex;
        align-items: center;
    }
    .kb_right{
        padding: 5px 10px;
    }
    .tjt{
        padding: 5px;
        text-align: center;
    }
    .tjban{
        height: 300px;
        background: white;
    }
</style>
<!-- /主体 -->
<div class="layui-col-md12">
    <div class="layui-col-md3 kb_left">
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ljxse.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">累计销售金额：<span id="ljxsje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ljcbe.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">累计成本金额：<span id="ljcbje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ljmlr.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">累计毛利润：<span id="ljmlr"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/mlrl.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">毛利润率：<span id="mlrl"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ljhke.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">累计回款额：<span id="ljhkje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ljwse.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">累计未收额：<span id="ljwsje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/ddghwsl.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">待订货物数量：<span id="ddhwsl"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon">当前年份</div>
            <div class=" kb_left_ban_text"> <input type="text" class="layui-input" id="thisYear" readonly value="{:date('Y')}" ></div>
        </div>
<!--        <div class="layui-col-md12 kb_left_ban">-->
<!--            <div class="kb_left_ban_icon">销售单位</div>-->
<!--            <form class=" layui-form kb_left_ban_text">-->
<!--                <select name="" id="salesUnitId" class="layui-select" lay-search lay-filter="salesUnitId">-->
<!--                    <option value="">销售单位</option>-->
<!--                    {volist name="saleUnitList" id="sl"}-->
<!--                    <option value="{$sl.id}">{$sl.title}</option>-->
<!--                    {/volist}-->
<!--                </select>-->
<!--            </form>-->
<!--        </div>-->
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/bnxse.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">本年销售额：<span id="bnxsje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/bncbe.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">本年成本额：<span id="bncbje"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/bnmlr.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">本年毛利润：<span id="bnmlr"></span></div>
        </div>
        <div class="layui-col-md12 kb_left_ban">
            <div class="kb_left_ban_icon"><img src="{__IMG__}/icon/bnfye.png" height="40" alt=""></div>
            <div class="kb_left_ban_text">本年费用额：<span id="bnfye"></span></div>
        </div>
    </div>
    <div class="layui-col-md9 kb_right">
        <div class="layui-col-md12">
            <div class="layui-col-md6 tjt">
              <div id="jeytj"  class="tjban"></div>
            </div>
            <div class="layui-col-md6 tjt">

               <div id="htytj" class="tjban"></div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-col-md6 tjt">
                <div id="ddytjt" class="tjban"></div>
            </div>
            <div class="layui-col-md6 tjt">

                <div id="mlrytjt" class="tjban"></div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-col-md4 tjt">
                <div id="ytdlrl" class="tjban"></div>
            </div>
            <div class="layui-col-md4 tjt">

                <div id="ytdwcl" class="tjban"></div>
            </div>
            <div class="layui-col-md4 tjt">

                <div id="qnwcl" class="tjban"></div>
            </div>
        </div>

    </div>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}
<script src="{__GOUGU__}/third_party/echart/echarts.min.js"></script>
<script>

    const moduleInit = ['tool'];
    function gouguInit() {
        var table = layui.table, tool = layui.tool, form = layui.form, laydate = layui.laydate;
        var upload = layui.upload;

        laydate.render({
            elem:'#thisYear',
            type:'year',
            max:0,
            done:function (e) {
                getLftYearData()
                getjeytj()
                gethtytj();
                getddytjt();
                getmlrytjt();
                getytdlrl();
                getytdwcl();
                getqnwcl();
            }
        })
        form.on('select(salesUnitId)', function (data) {
            getLftYearData()
            getjeytj()
            // gethtytj();
            // getddytjt();
            // getmlrytjt();
            // getytdlrl();
            // getytdwcl();
            // getqnwcl();
        });
        getLeftData()
        getLftYearData();
        getjeytj()
        gethtytj();
        getddytjt();
        getmlrytjt();
        getytdlrl();
        getytdwcl();
        getqnwcl();
    }

    function getLeftData() {
        httpRequest("{:url('api/getSjLjData')}",{},function (res) {
            let data=res.data;
            $("#ddhwsl").text(data.ddhwsl);
            $("#ljcbje").text(data.ljcbje);
            $("#ljhkje").text(data.ljhkje);
            $("#ljmlr").text(data.ljmlr);
            $("#ljwsje").text(data.ljwsje);
            $("#ljxsje").text(data.ljxsje);
            $("#mlrl").text(data.mlrl);
        },false)

    }

    function getLftYearData() {
        unifyRequest("{:url('api/getSjLjBuyYear')}",function (res) {
            let data=res.data;
            $("#bncbje").text(data.bncbje);
            $("#bnfye").text(data.bnfye);
            $("#bnmlr").text(data.bnmlr);
            $("#bnxsje").text(data.bnxsje);
        })
    }
    function getjeytj() {
        var chartDom = document.getElementById('jeytj');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();

        myChart.showLoading();
        unifyRequest("{:url('api/getjeytj')}",function (res) {
            myChart.hideLoading();
            let data=res.data;
            option = {

                title:{
                    text:'金额月统计',
                    textAlign:"center",
                    left:'50%',
                    top:0
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.mon
                },
                // legend: {
                //
                // },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '回款金额',
                        type: 'bar',
                        data: data.hkje,
                        itemStyle:{
                            color:'#7c7ee6'
                        }
                    },
                    {
                        name: '采购金额',
                        type: 'bar',
                        data: data.cgje,
                        itemStyle:{
                            color:'#5457e2'
                        }
                    },
                ]
            };

            option && myChart.setOption(option);
        })

    }
    function gethtytj() {
        var chartDom = document.getElementById('htytj');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/gethtytj')}",function (res) {
            myChart.hideLoading();
            let data=res.data;
            option = {
                title:{
                    text:'合同月统计',
                    textAlign:"center",
                    left:'50%',
                    top:0
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.mon

                },
                // legend: {
                //
                // },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '今年销售金额',
                        type: 'pictorialBar',
                        data: data.thisYear,
                        symbol: 'triangle',
                        itemStyle:{
                            color:'#fea792'
                        }
                    },
                    {
                        name: '去年销售金额',
                        type: 'pictorialBar',
                        data: data.lastYear,
                        symbol: 'triangle',
                        itemStyle: {
                            color:'#f8866b'
                        }
                    },
                ],

            };

            option && myChart.setOption(option);
        },false)
    }
    function getddytjt() {
    var chartDom = document.getElementById('ddytjt');
    var myChart = echarts.init(chartDom);
    var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/getddytjt')}",function (res) {
            myChart.hideLoading();
            let data = res.data;
            option = {
                title: {
                    text: '订单月统计',
                    left:"0"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // data: ['订单同比增长率', '订单环比增长率']
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.mon
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '订单同比增长率',
                        type: 'line',
                        stack: 'Total',
                        data: data.tbNum
                    },
                    {
                        name: '订单环比增长率',
                        type: 'line',
                        stack: 'Total',
                        data: data.hbNum
                    }

                ]
            };
            option && myChart.setOption(option);
        },false);



}
    function getmlrytjt() {

        var chartDom = document.getElementById('mlrytjt');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/getmlrytjt')}",function (res) {
            myChart.hideLoading();
            let data=res.data;
            option = {
                title:{
                    text:'毛利润月统计图',
                    textAlign:"center",
                    left:'50%',
                    top:0
                },

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.mon,
                    position:'top'
                },
                // legend: {
                //
                // },
                yAxis: {
                    type: 'value',
                    inverse: true // 开启反向坐标轴
                },
                series: [
                    {
                        name: '毛利润',
                        type: 'bar',
                        data: data.thisYear
                    },
                ]
            };

            option && myChart.setOption(option);
        },false)

    }
    
    function getytdlrl() {
        var chartDom = document.getElementById('ytdlrl');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/getytdlrl')}",function (res) {
            myChart.hideLoading();
            let data = res.data;
            option = {
                title: {
                    text: data.lrl+"%",
                    subtext: 'YTD利润率',
                    subtextStyle: {
                        color: '#aaaaaa',
                        fontSize: 15
                    },
                    // itemGap: 20,
                    left: 'center',
                    top: '45%'
                },

                tooltip: {
                    formatter: function (params) {
                        return 'YTD利润率';
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'],
                        radius: '100%'
                    }
                ],
                series: [

                    {
                        type: 'bar',
                        data: [data.lrl],
                        showBackground: true,
                        polarIndex: 0,
                        backgroundStyle: {
                            color: '#f2f2f2',
                            borderWidth: 10
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#ffc3b3'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fda792'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#ff8669'
                            }
                        }
                    }
                ]
            };
            // option = {
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     title:{
            //         text:'YTD利润率',
            //         left:"40%"
            //     },
            //     // legend: {
            //     //     top: '0',
            //     //     left: 'center'
            //     // },
            //     series: [
            //         {
            //             // name: 'YTD利润率',
            //             type: 'pie',
            //             radius: ['40%', '70%'],
            //             avoidLabelOverlap: false,
            //             // label: {
            //             //     show: false,
            //             //     position: 'center'
            //             // },
            //             emphasis: {
            //                 label: {
            //                     show: true,
            //                     fontSize: 10,
            //                     fontWeight: 'bold'
            //                 }
            //             },
            //             labelLine: {
            //                 show: false
            //             },
            //             data: [
            //                 { value: data.lrl, name: '利润率' },
            //                 { value: data.cbl, name: '成本率' },
            //
            //             ]
            //         }
            //     ]
            // };
            option && myChart.setOption(option);
        },false);

    }
    function getytdwcl() {
        var chartDom = document.getElementById('ytdwcl');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/getytdwcl')}",function (res) {
            myChart.hideLoading();
            let data = res.data;
            option = {
                title: {
                    text: data.wcl+"%",
                    subtext: 'YTD完成率',
                    subtextStyle: {
                        color: '#aaaaaa',
                        fontSize: 15
                    },
                    // itemGap: 20,
                    left: 'center',
                    top: '45%'
                },

                tooltip: {
                    formatter: function (params) {
                        return 'YTD完成率';
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'],
                        radius: '100%'
                    }
                ],
                series: [

                    {
                        type: 'bar',
                        data: [data.wcl],
                        showBackground: true,
                        polarIndex: 0,
                        backgroundStyle: {
                            color: '#f2f2f2',
                            borderWidth: 10
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#9090e3'
                                    },
                                    {
                                        offset: 1,
                                        color: '#7b7ce5'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#5d5ee2'
                            }
                        }
                    }
                ]
            };
            // option = {
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     title:{
            //         text:'YTD完成率',
            //         left:"40%"
            //     },
            //     // legend: {
            //     //     top: '5%',
            //     //     left: 'center'
            //     // },
            //     series: [
            //         {
            //             // name: 'YTD完成率',
            //             type: 'pie',
            //             radius: ['40%', '70%'],
            //             avoidLabelOverlap: false,
            //             // label: {
            //             //     show: false,
            //             //     position: 'center'
            //             // },
            //             emphasis: {
            //                 label: {
            //                     show: true,
            //                     fontSize: 10,
            //                     fontWeight: 'bold'
            //                 }
            //             },
            //             labelLine: {
            //                 show: false
            //             },
            //             data: [
            //                 { value: data.wcl, name: '已完成' },
            //                 { value: data.wwc, name: '未完成' },
            //
            //             ]
            //         }
            //     ]
            // };


            option && myChart.setOption(option);
        },false);

    }
    function getqnwcl() {
        var chartDom = document.getElementById('qnwcl');
        var myChart = echarts.init(chartDom);
        var option;
        let year=$("#thisYear").val();
        myChart.showLoading();
        unifyRequest("{:url('api/getqnwcl')}",function (res) {
            myChart.hideLoading();
            let data = res.data;
            option = {
                title: {
                    text: data.wcl+"%",
                    subtext: '全年完成率',
                    subtextStyle: {
                        color: '#aaaaaa',
                        fontSize: 15
                    },
                    // itemGap: 20,
                    left: 'center',
                    top: '45%'
                },

                tooltip: {
                    formatter: function (params) {
                        return '全年完成率';
                    }
                },
                angleAxis: {
                    max: 100,
                    clockwise: false, // 逆时针
                    // 隐藏刻度线
                    show: false
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                polar: [
                    {
                        center: ['50%', '50%'],
                        radius: '100%'
                    }
                ],
                series: [

                    {
                        type: 'bar',
                        data: [data.wcl],
                        showBackground: true,
                        polarIndex: 0,
                        backgroundStyle: {
                            color: '#f2f2f2',
                            borderWidth: 10
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#86c3fe'
                                    },
                                    {
                                        offset: 1,
                                        color: '#66b5ff'
                                    }
                                ]),
                                shadowBlur: 5,
                                shadowColor: '#4090fc'
                            }
                        }
                    }
                ]
            };
            // option = {
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     // legend: {
            //     //     top: '5%',
            //     //     left: 'center'
            //     // },
            //     title:{
            //         text:'全年完成率',
            //         left:"40%"
            //     },
            //     series: [
            //         {
            //             // name: '全年完成率',
            //             type: 'pie',
            //             radius: ['40%', '70%'],
            //             avoidLabelOverlap: false,
            //             // label: {
            //             //     show: false,
            //             //     position: 'center'
            //             // },
            //             emphasis: {
            //                 label: {
            //                     show: true,
            //                     fontSize: 10,
            //                     fontWeight: 'bold'
            //                 }
            //             },
            //             labelLine: {
            //                 show: false
            //             },
            //             data: [
            //                 { value: data.wcl, name: '已完成' },
            //                 { value: data.wwc, name: '未完成' },
            //
            //             ]
            //         }
            //     ]
            // };
            option && myChart.setOption(option);
        },false)



    }


    //统一请求
    function unifyRequest(url,res) {
        let year=$("#thisYear").val();
        let salesUnitId=$("#salesUnitId").val();
        let param={
            year:year,
            // salesUnitId:salesUnitId
        };
        httpRequest(url,param,res,false)
    }
</script>

{/block}
<!-- /脚本 -->